<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:t="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="_csrf" th:content="${_csrf.token}">
    <meta name="_csrf_header" th:content="${_csrf.headerName}">
    <title>个人中心</title>
    <!-- Font Awesome -->
    <link th:href="@{/webjars/github-com-almasaeed2010-AdminLTE/2.4.8/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <!-- Ionicons -->
    <link th:href="@{/webjars/github-com-almasaeed2010-AdminLTE/2.4.8/Ionicons/css/ionicons.min.css}" rel="stylesheet">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}">
    <!-- bootstrap-datetimepicker 2.4.2 -->
    <link rel="stylesheet" th:href="@{https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css}">

    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/webjars/select2/4.0.5/css/select2.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/select2-bootstrap-theme/0.1.0-beta.10/dist/select2-bootstrap.min.css}">

    <!--[if lt IE 9]>
    <script src="/webjars/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
    <script src="/webjars/respond/1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <form id="form_edit" class="form-horizontal" role="form" style="margin-top: 10px">
        <div class="form-group">
            <label for="userId" class="col-sm-offset-2 col-sm-2 control-label">用户id</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="userId" name="id" placeholder="请输入id" th:value="${user.id}">
            </div>
        </div>
        <div class="form-group">
            <label for="username" class="col-sm-offset-2 col-sm-2 control-label">昵称</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入昵称" th:value="${user.username}">
            </div>
        </div>
        <div class="form-group">
            <label for="sex" class="col-sm-offset-2 col-sm-2 control-label">性别</label>
            <div class="col-sm-6">
                <select class="form-control" name="sex" id="sex">
                    <option value="true">男</option>
                    <option value="false">女</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="phone" class="col-sm-offset-2 col-sm-2 control-label">手机号</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号" th:value="${user.phone}">
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-offset-2 col-sm-2 control-label">邮箱</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱" th:value="${user.email}">
            </div>
        </div>
        <div class="form-group">
            <label for="address" class="col-sm-offset-2 col-sm-2 control-label">地址</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="address" name="address" placeholder="请输入地址" th:value="${user.address}">
            </div>
        </div>
        <div class="form-group">
            <label for="birth" class="col-sm-offset-2 col-sm-2 control-label">生日</label>
            <div class="col-sm-6">
                <div id="birth" class="input-group date datepicker" data-provide="datepicker">
                    <input type="text" class="form-control" name="birth">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="age" class="col-sm-offset-2 col-sm-2 control-label">年龄</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄" th:value="${user.age}">
            </div>
        </div>
        <div class="form-group">
            <label for="headPhoto" class="col-sm-offset-2 col-sm-2 control-label">头像</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="headPhoto" name="headPhoto" placeholder="请输入头像" th:value="${user.headPhoto}">
            </div>
        </div>
        <div class="form-group">
            <label for="personBrief" class="col-sm-offset-2 col-sm-2 control-label">个人简介</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="personBrief" name="personBrief" placeholder="请输入个人简介" th:value="${user.personBrief}">
            </div>
        </div>
        <div class="form-group">
            <div style="text-align: center">
                <button type="button" class="btn btn-primary" style="width: 80px;" onclick="edit()">修改</button>
                <button type="button" class="btn btn-default" style="width: 80px;" th:text="#{cancel}"></button>
            </div>
        </div>
    </form>
</div>
<!-- jQuery 3 -->
<script th:src="@{/webjars/jquery/3.3.1/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<!-- bootstrap-datetimepicker 2.4.2 -->
<script th:src="@{https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<!-- Select2 -->
<script th:src="@{/webjars/select2/4.0.5/js/select2.full.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script th:src="@{/js/util.js}"></script>
<script th:inline="javascript">
    $(function () {
        setTokenInHeader();

        //Initialize Select2 Elements
        $('.select2').select2({
            theme: "bootstrap"
        });
        //解决select2校验不实时的问题
        $(".select2").on("select2:select",function(){
            $(this).valid();
        });

        $(".datepicker").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
            todayBtn: true,//今日按钮
            format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
        });

        let birth = [[${user.birth}]];

        $('#birth').datepicker("setDate", new Date(birth).format('yyyy-MM-dd'));//设置
    });



    /**
     * 格式化Wed Jul 12 00:00:00 GMT+08:00 1995
     * @param str
     * @returns {string}
     */
    function convert(str) {
        var date = new Date(str),
            mnth = ("0" + (date.getMonth()+1)).slice(-2),
            day  = ("0" + date.getDate()).slice(-2);
        return [ date.getFullYear(), mnth, day ].join("-");
    }

    function edit() {
        doRequest({
            formId: '#form_edit',
            url: '/api/oauthUsers/personalCenter/edit',
            type: 'PATCH'
        });
    }

    function setTokenInHeader() {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function (e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });
    }

    function doRequest(options) {
        let requestData = $(options.formId).serializeArray();
        console.log(requestData);
        let sideMenuGroup = {};
        let i;
        for(i = 0; i < requestData.length; i++){
            //如果存在相同的属性，则该属性值是数组类型。
            if(sideMenuGroup[requestData[i].name]){
                sideMenuGroup[requestData[i].name] += ',' + requestData[i].value;
            }else{
                sideMenuGroup[requestData[i].name] = requestData[i].value;
            }
        }
        var index;
        $.ajax({
            url: options.url,
            type: options.type,
            data: JSON.stringify(sideMenuGroup),
            contentType: "application/json;charset=UTF-8",
            beforeSend: function(){
                index = layer.load(0, {shade: false});
            },
            complete: function(){
                layer.close(index);
            },
            success:function (data) {
                console.log(data);
                if(data.code == 200){
                    layer.msg('修改成功！');
                }
            }
        });
    }
</script>
</body>
</html>